/*
 * @Author: mikey.zhaopeng 
 * @Date: 2019-09-17 21:34:32 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-09-17 23:09:00
 后台首页111
 */

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item ,index) in counts" :key="index">
        <div class="grid-content bg-purple">
          <el-card shadow="hover">
            <div class="d-flex align-items-center">
              <i
                :class="[item.icon,item.color]"
                class="h4 mb-0 mr-3 text-white"
                style="width:40px;line-height:40px;text-align:center;"
              ></i>
              <div style="height:40px;">
                <h4 class="mb-1">{{item.num}}</h4>
                <small class="text-muted">{{item.desc}}</small>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!-- 中心内容 -->
    <el-row :gutter="20" class="mt-3">
      <!-- 店铺订单提示 -->
      <el-col :span="12" style="height:370px;" class="d-flex flex-column">
        <el-card class="box-card mb-auto" v-for="(tip,index) in tips" :key="index">
          <div slot="header" class="clearfix">
            <span>{{tip.title}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">{{tip.desc}}</el-button>
          </div>
          <div class="row">
            <div :class="tip.list.length|getCol" v-for="(tlist,i) in tip.list" :key="i">
              <button class="btn btn-light w-100">
                <h4 class="mb-1">{{tlist.value}}</h4>
                <small class="text-muted">{{tlist.name}}</small>
              </button>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 统计 -->
      <el-col :span="12">
        <el-card class="box-card" style="height:370px;">
          <div class="text item">
            <!-- 统计图 -->
            <div ref="myChart" style="width: 100%;height:300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="my-3 pb-5">
      <el-col :span="12">
        <el-card class="box-card" height="200">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div class="media align-items-center border">
            <span class="py-4 px-3 bg-light">昨日销量</span>
            <div class="media-body">
              <div class="border-bottom">
                <span class="pl-3">订单量(件)</span>12
              </div>
              <div>
                <span class="pl-3">订单量(件)</span>12
              </div>
            </div>
          </div>
          <div class="media align-items-center border mt-3">
            <span class="py-4 px-3 bg-light">昨日销量</span>
            <div class="media-body">
              <div class="border-bottom">
                <span class="pl-3">订单量(件)</span>12
              </div>
              <div>
                <span class="pl-3">订单量(件)</span>12
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>单品销售排名</span>
            <el-button style="float: right; padding: 3px 0" type="text">按周期销售</el-button>
          </div>
          <div>
            <el-table :data="tableData" height="200" border style="width: 100%">
              <el-table-column label="#" width="50" type="index"></el-table-column>
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="商品信息"></el-table-column>
              <el-table-column prop="number " label="销量"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "home",
  data() {
    return {
      counts: [
        {
          icon: "el-icon-user-solid",
          num: 30,
          color: "bg-success",
          desc: "关注人数(个)"
        },
        {
          icon: "el-icon-user-solid",
          num: 120,
          color: "bg-primary",

          desc: "订单总数(笔)"
        },
        {
          icon: "el-icon-user-solid",
          num: 230,
          color: "bg-danger",

          desc: "今日订单金额(元)"
        },
        {
          icon: "el-icon-user-solid",
          num: 330,
          color: "bg-warning",

          desc: "本月销量(笔)"
        }
      ],
      tips: [
        {
          title: "店铺及商品提示",
          desc: "操作按钮",
          list: [
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            }
          ]
        },
        {
          title: "交易提示",
          desc: "操作按钮",
          list: [
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            },
            {
              name: "出售中",
              value: 64
            }
          ]
        }
      ],
      tableData: [
        {
          date: "2019-06-12",
          name: "小天鹅",
          number: "9"
        }
      ]
    };
  },
  filters: {
    // 根据内容计算col占多少份
    getCol(total) {
      return `col-${12 / total}`;
    }
  },
  mounted() {
    this.drawLine();
  },

  methods: {
    // 统计图
    drawLine() {
      console.log(this.$refs.myChart);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.myChart);
      // 使用刚指定的配置项和数据显示图表。
      let option = {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      myChart.setOption(option);
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>